<template>
  <view class="job-detail-page">
    <!-- 顶部职位信息 -->
    <view class="job-header">
      <text class="job-title">现金日结天天可做</text>
      <text class="job-salary">5000-12000/天</text>
      <view class="job-location">
        <text class="iconfont-v2 icon-dingwei location-icon"></text>
        <text class="location-text">南宁市.青秀区,民族大道50号</text>
      </view>
      <view class="job-category">
        <text class="iconfont-v2 icon-bofang category-icon"></text>
        <text class="category-text">酒店</text>
      </view>
    </view>

    <!-- 职位要求标签 -->
    <view class="job-requirements">
      <view class="requirement-tags">
        <text class="tag">1-3年</text>
        <text class="tag">学历不限</text>
        <text class="tag">设计软件</text>
        <text class="tag">设计师</text>
        <text class="tag-nums">5人报名</text>
      </view>
    </view>

    <!-- 工作详情 -->
    <view class="job-info-card">
      <view class="info-item">
        <text class="info-label">工作日期:</text>
        <text class="info-value">每周工作天数2-3天</text>
      </view>
      <view class="info-item">
        <text class="info-label">工作时段:</text>
        <text class="info-value">09:00-22:00</text>
      </view>
      <view class="info-item">
        <text class="info-label">职位要求:</text>
        <text class="info-value">不限性别 | 限18岁以上45岁以下</text>
      </view>
    </view>

    <!-- 公司信息 -->
    <view class="company-card" @click="goToCompany">
      <view class="company-info">
        <view class="company-avatar">
          <image src="http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" alt="company" />
        </view>
        <view class="company-details">
          <text class="company-name">绍兴飞来科技有限公司</text>
          <view class="company-stats">
            <text class="stat-txt">就近分配</text>
            <!-- <text class="stat-item">100-499人</text>
            <text class="stat-item">互联网</text>
            <text class="stat-item">上市公司</text> -->
          </view>
        </view>
      </view>
      <text class="iconfont-v2 icon-youjiantou company-arrow"></text>
    </view>

    <!-- 班次信息 -->
    <view class="shifts-card">
      <view class="shifts-header">
        <text class="shifts-title">班次 (5)</text>
        <view class="view-all" @click="showShiftModal">
          <text>查看全部</text>
          <text class="iconfont-v2 icon-youjiantou"></text>
        </view>
      </view>
      
      <view class="shifts-grid">
        <view 
          class="shift-item" 
          v-for="(shift, index) in shiftsList" 
          :key="index"
          :class="{ 'selected': selectedShift === index }"
          @click="selectShift(index)"
        >
          <text class="shift-date">{{ shift.date }}</text>
          <text class="shift-time">{{ shift.time }}</text>
          <view class="shift-price">
            <text class="price-text">¥{{ shift.price }}</text>
            <text class="iconfont-v2 icon-youjiantou shift-arrow"></text>
          </view>
        </view>
      </view>
      
      <view class="pagination-indicator">
        <view class="indicator-dot active"></view>
        <view class="indicator-dot"></view>
        <view class="indicator-dot"></view>
      </view>
    </view>

    <!-- 职位描述 -->
    <view class="job-description-card">
      <text class="card-title">职位详情</text>
      <view class="warning-section">
        <text class="warning-content" :class="{ expanded: isDescriptionExpanded }">
          收取培训费、贷款培训,或在录用过程中需支付体检、服装、押金等费用、鼓吹出国出境务工短期内可获得丰厚报酬等都属违法行为,请求职者提高警惕,谨防上当受骗,如遇类似情况,请立即举报。校园招聘违规举报

          收取培训费、贷款培训,或在录用过程中需支付体检、服装、押金等费用、鼓吹出国出境务工短期内可获得丰厚报酬等都属违法行为,请求职者提高警惕,谨防上当受骗,如遇类似情况,请立即举报。校园招聘违规举报
        </text>
        <view class="view-more" @click="toggleDescription">
          <text>查看更多</text>
          <text class="iconfont-v2 icon-mui-icon-r-ltdarr-copy arrow-down" :class="{ 'arrow-up': isDescriptionExpanded }"></text>
        </view>
      </view>
    </view>
    

    <view class="benefits-card">
      <view class="card-title">员工福利</view>
      <view class="requirement-tags">
        <text class="tag">当日结</text>
        <text class="tag">100元补贴</text>
        <text class="tag">高温补贴</text>
      </view>
    </view>

    <!-- 企业验真 -->
    <view class="verification-card">
      <view class="card-title">企业验真</view>
      <view class="verification-items">
        <view class="verification-item">
          <text class="iconfont-v2 icon-xieyi verification-icon"></text>
          <text class="verification-text">企业已通过资质核验</text>
        </view>
        <view class="verification-item">
          <text class="iconfont-v2 icon-globediqiu verification-icon"></text>
          <text class="verification-text">企业发布者已通过授权核验</text>
        </view>
        <view class="verification-item">
          <text class="iconfont-v2 icon-shu02-F verification-icon"></text>
          <text class="verification-text">企业发布者已通过实名认证</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-btn collect-btn" @click="toggleCollect">
        <text class="iconfont-v2 icon-shoucang1 action-icon" :class="{ collected: isCollected }"></text>
        <text class="action-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
      </view>
      <!-- <view class="action-btn share-btn" @click="shareJob">
        <text class="iconfont-v2 icon-fenxiang action-icon"></text>
        <text class="action-text">分享</text>
      </view> -->
      <button class="apply-btn" @click="applyJob">
        <text>立即申请</text>
      </button>
    </view>

    <!-- 班次选择弹窗 -->
    <view class="shift-modal" v-if="showModal" @click="hideShiftModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择班次</text>
          <text class="iconfont-v2 icon-close close-btn" @click="hideShiftModal"></text>
        </view>
        
        <view class="modal-body">
          <view 
            class="modal-shift-item" 
            v-for="(shift, index) in allShiftsList" 
            :key="index"
            :class="{ 'selected': selectedModalShift === index }"
            @click="selectModalShift(index)"
          >
            <view class="shift-info">
              <text class="shift-date">{{ shift.date }}</text>
              <text class="shift-time">{{ shift.time }}</text>
              <text class="shift-hours">工时: {{ shift.hours }}小时</text>
            </view>
            <view class="shift-right">
              <view class="shift-enrollment">
                <text class="iconfont-v2 icon-xueyuan enrollment-icon"></text>
                <text class="enrollment-text">
                 <text class="nums"> {{ shift.enrollment }} </text>
                  /{{ shift.capacity }}</text>
              </view>
              <text class="shift-price">¥{{ shift.price }}</text>
              <text class="iconfont-v2 icon-youjiantou shift-arrow"></text>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="register-btn" @click="registerSelectedShifts">
            已选择{{ selectedShiftsCount }}个班次,立即报名
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isCollected: false,
      isDescriptionExpanded: false,
      selectedShift: 1, // 默认选中第二个班次
      showModal: false,
      selectedModalShift: 0, // 弹窗中选中的班次
      shiftsList: [
        {
          date: "10月19日 周日",
          time: "16:00-次日00:00",
          price: 105
        },
        {
          date: "10月20日 周一",
          time: "16:00-次日00:00",
          price: 105
        },
        {
          date: "10月21日 周二",
          time: "16:00-次日00:00",
          price: 105
        },
        {
          date: "10月22日 周三",
          time: "16:00-次日00:00",
          price: 105
        },
        {
          date: "10月23日 周四",
          time: "16:00-次日00:00",
          price: 105
        },
        {
          date: "10月24日 周五",
          time: "16:00-次日00:00",
          price: 105
        }
      ],
      allShiftsList: [
        {
          date: "10月19日 周日",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 2,
          capacity: 5
        },
        {
          date: "10月20日 周一",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 3,
          capacity: 5
        },
        {
          date: "10月21日 周二",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 1,
          capacity: 5
        },
        {
          date: "10月22日 周三",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 4,
          capacity: 5
        },
        {
          date: "10月23日 周四",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 2,
          capacity: 5
        },
        {
          date: "10月24日 周五",
          time: "16:00-次日00:00",
          price: 105,
          hours: 5,
          enrollment: 0,
          capacity: 5
        }
      ]
    }
  },
  computed: {
    selectedShiftsCount() {
      return 1; // 当前只支持单选，所以固定为1
    }
  },
  methods: {
    toggleCollect() {
      this.isCollected = !this.isCollected;
      const message = this.isCollected ? '已收藏' : '已取消收藏';
      uni.showToast({
        title: message,
        icon: 'success'
      });
    },
    shareJob() {
      uni.showToast({
        title: "分享职位",
        icon: 'none'
      });
    },
    applyJob() {
      uni.showToast({
        title: '申请成功！',
        icon: 'success'
      });
    },
    goToCompany() {
      uni.navigateTo({
        url: '/pages/fast/company'
      });
    },
    toggleDescription() {
      this.isDescriptionExpanded = !this.isDescriptionExpanded;
    },
    selectShift(index) {
      this.selectedShift = index;
      uni.showToast({
        title: `已选择${this.shiftsList[index].date}班次`,
        icon: 'success'
      });
    },
    showShiftModal() {
      this.showModal = true;
    },
    hideShiftModal() {
      this.showModal = false;
    },
    selectModalShift(index) {
      this.selectedModalShift = index;
    },
    registerSelectedShifts() {
      const selectedShift = this.allShiftsList[this.selectedModalShift];
      uni.showToast({
        title: `已选择${selectedShift.date}班次，报名成功！`,
        icon: 'success'
      });
      this.hideShiftModal();
    }
  }
}
</script>

<style lang="scss" scoped>
.job-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

/* 顶部职位信息 */
.job-header {
  background: #F8605F;
  padding: 40rpx 30rpx;
  color: #fff;
  position: relative;
  
  .job-title {
    font-size: 40rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
    display: block;
    line-height: 1.4;
  }
  
  .job-salary {
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 30rpx;
    display: block;
    color: #FFD700;
  }
  
  .job-location, .job-category {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    .location-icon, .category-icon {
      font-size: 28rpx;
      margin-right: 12rpx;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .location-text, .category-text {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

/* 职位要求标签 */
.job-requirements {
  background: #F8F8F8;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  border-radius: 24rpx 24rpx 0 0;
  margin-top: -24rpx;
  position: relative;
  z-index: 1;

}
  
.requirement-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  
  .tag {
    background: #EAEAEA;
    color: #666;
    padding: 6rpx 12rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    border: 2rpx solid #e9ecef;
  }
  .tag-nums{
    font-size: 24rpx;
    color: #333333;
    margin-left: auto;
  }
}
/* 职位描述卡片 */
.job-description-card {
  background: white;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .warning-section {
    .warning-content {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      white-space: normal;

      &.expanded {
        display: block;
        -webkit-line-clamp: initial;
        -webkit-box-orient: initial;
        overflow: visible;
      }
    }
    
    .view-more {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ED6567;
      font-size: 24rpx;
      cursor: pointer;
      gap: 8rpx;
      
      .arrow-down {
        font-size: 24rpx;
        transition: transform 0.3s ease;
        
        &.arrow-up {
          transform: rotate(180deg);
        }
      }
    }
  }
}

/* 工作详情卡片 */
.job-info-card {
  // background: white;
  margin: 20rpx;
  // border-radius: 24rpx;
  padding: 10rpx;
  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .info-item {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 10rpx 0;
    border-bottom: 2rpx solid #f8f9fa;
    gap: 10rpx;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
    }
  }
}

/* 公司信息卡片 */
.company-card {
  background: white;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  }
  
  .company-info {
    display: flex;
    align-items: center;
    
    .company-avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .company-details {
      .company-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .company-stats {
        display: flex;
        gap: 16rpx;

        .stat-txt{
          font-size: 24rpx;
          color: #666;
        }
        
        .stat-item {
          font-size: 24rpx;
          color: #666;
          background: #f8f9fa;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
  
  .company-arrow {
    font-size: 32rpx;
    color: #ccc;
  }
}

/* 班次信息卡片 */
.shifts-card {
  background: white;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .shifts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .shifts-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .view-all {
      display: flex;
      align-items: center;
      gap: 8rpx;
      color: #333;
      font-size: 24rpx;
      cursor: pointer;
      
      .iconfont-v2 {
        font-size: 20rpx;
      }
    }
  }
  
  .shifts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 30rpx;
    
    .shift-item {
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx 20rpx;
      border: 2rpx solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &.selected {
        border-color: #ED6567;
        background: #fff5f5;
      }
      
      .shift-date {
        font-size: 24rpx;
        color: #666;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .shift-time {
        font-size: 20rpx;
        color: #999;
        display: block;
        margin-bottom: 16rpx;
      }
      
      .shift-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .price-text {
          font-size: 28rpx;
          font-weight: 600;
          color: #ED6567;
        }
        
        .shift-arrow {
          font-size: 20rpx;
          color: #999;
        }
      }
    }
  }
  
  .pagination-indicator {
    display: flex;
    justify-content: center;
    gap: 12rpx;
    
    .indicator-dot {
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      background: #e0e0e0;
      transition: all 0.3s ease;
      
      &.active {
        background: #ED6567;
        width: 24rpx;
        border-radius: 4rpx;
      }
    }
  }
}

/* 职位描述卡片 */
.job-description-card {
  background: white;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .description-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    display: block;
  }
}

/* 工作要求卡片 */
.job-requirements-card {
  background: white;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .requirements-list {
    .requirement-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .requirement-icon {
        font-size: 24rpx;
        color: #ED6567;
        margin-right: 16rpx;
        margin-top: 4rpx;
      }
      
      .requirement-text {
        flex: 1;
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

/* 员工福利卡片 */
.benefits-card {
  background: white;
  padding: 30rpx;
  // margin: 20rpx;
  // border-radius: 24rpx;
  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .benefit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    .tag {
      padding: 12rpx 24rpx;
      background: #f5f5f5;
      color: #666;
      font-size: 24rpx;
      border-radius: 30rpx;
    }
  }
}

/* 企业验真卡片 */
.verification-card {
  background: white;
  padding: 30rpx;
  // margin: 20rpx;
  // border-radius: 24rpx;
  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .verification-items {
    .verification-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .verification-icon {
        font-size: 32rpx;
        color: #ED6567;
        margin-right: 16rpx;
      }
      
      .verification-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 40rpx;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 60rpx;

  .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    .action-icon {
      font-size: 32rpx;
      color: #666;
      transition: all 0.3s ease;

      &.collected {
        color: #ED6567;
      }
    }

    .action-text {
      font-size: 24rpx;
      color: #666;
    }

    &:hover .action-icon {
      color: #ED6567;
    }
  }

  .apply-btn {
    flex: 1;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #d55a54;
    }

    text {
      color: white;
    }
  }
}

/* 班次选择弹窗 */
.shift-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  
  .modal-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    flex-direction: column;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .close-btn {
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
      }
    }
    
    .modal-body {
      flex: 1;
      padding: 20rpx 30rpx;
      overflow-y: auto;
      
      .modal-shift-item {
        background: #f8f9fa;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;
        border: 2rpx solid transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &.selected {
          border-color: #ED6567;
          background: #fff5f5;
        }
        
        .shift-info {
          flex: 1;
          
          .shift-date {
            font-size: 28rpx;
            color: #333;
            font-weight: 600;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .shift-time {
            font-size: 24rpx;
            color: #666;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .shift-hours {
            font-size: 22rpx;
            color: #999;
            display: block;
          }
        }
        
        .shift-right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 8rpx;
          
          .shift-enrollment {
            display: flex;
            align-items: center;
            gap: 4rpx;
            
            .enrollment-icon {
              font-size: 30rpx;
              color: #666;
            }
            
            .enrollment-text {
              font-size: 22rpx;
              color: #666;
              font-weight: 500;
              .nums{
                color: #ED6567;
              }
            }
          }
          
          .shift-price {
            font-size: 32rpx;
            color: #ED6567;
            font-weight: 600;
          }
          
          .shift-arrow {
            font-size: 20rpx;
            color: #999;
          }
        }
      }
    }
    
    .modal-footer {
      padding: 30rpx;
      border-top: 2rpx solid #f0f0f0;
      
      .register-btn {
        width: 100%;
        background: #ED6567;
        color: white;
        border: none;
        border-radius: 50rpx;
        padding: 24rpx;
        font-size: 32rpx;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background: #d55a54;
        }
      }
    }
  }
}
</style>